<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>



    <script>

        // 防抖和节流：降低事件的执行频率
        //     使用延时器

        //   


        // 节流：一段时间内执行一次，事件一旦触发，就会直接执行完毕，直到事件执行完才会再次触发事件
        var flag = null;
        window.onscroll = function () {
            if (!flag) {
                flag = setTimeout(function () {
                    console.log(1);
                    flag = null;
                }, 300)
            }
        }


        // 防抖：事件一直触发，直到最后一次，这个事件才会真正被执行   

        var t = null;
        window.onresize = function () {
            if (t) clearInterval(t);
            t = setTimeout(function () {
                console.log(2);
            }, 300)
        }

    </script>

</body>

</html>